<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :table-loading="tableLoading"
      :data="tableData"
      :page.sync="page"
      :option="tableOption"
      @row-del="deleteRow"
      @on-load="onLoad"
      @refresh-change="onLoad"
    >
      <template slot="supplyDepartment" slot-scope="{row}">
        <span>{{depts[row.supplyDepartment] || row.supplyDepartment}}</span>
      </template>
      <template slot="useDepartment" slot-scope="{row}">
        <span>{{depts[row.useDepartment] || row.useDepartment}}</span>
      </template>
      <template slot="name" slot-scope="scope">
        <el-tooltip class="item" :content="scope.row.name" placement="top-start">
          <span>{{scope.row.name.split('/').shift()}}...{{scope.row.name.split('/').pop()}}</span>
          <div slot="content"><span class="mar-r-15"><i @click="$copy(scope.row.name)" class="el-icon-document-copy cur-p"></i></span>{{scope.row.name}}</div>
        </el-tooltip>
      </template>
      <template slot="menuLeft" slot-scope="scope">
        <el-button @click="addRow" icon="el-icon-plus" type="primary" size="small">新增</el-button>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="editRow(scope.row)" icon="el-icon-edit" type="text" size="small">编辑</el-button>
        <el-button @click="viewRow(scope.row)" icon="el-icon-view" type="text" size="small">查看</el-button>
        <el-button @click="testRow(scope.row)" icon="el-icon-caret-right" type="text" size="small">测试</el-button>
      </template>
    </avue-crud>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      append-to-body
      @close="dialogCancel"
    >
      <data-share-form @close="dialogCancel" @refresh="onLoad" v-if="dialogVisibleType === 'edit'" :id="currentId"></data-share-form>
      <data-share-view @close="dialogCancel" v-if="dialogVisibleType === 'view'" :id="currentId" :deptDics="depts"></data-share-view>
      <data-share-test @close="dialogCancel" v-if="dialogVisibleType === 'test'" :id="currentId" :deptDics="depts"></data-share-test>
    </el-dialog>
  </basic-container>
</template>
<script>
import api from '@/api/dataShare/index';

import dataShareForm from './datashareForm.vue';
import dataShareTest from './datashareTest.vue';
import dataShareView from './datashareView.vue';

export default {
  components: {
    dataShareForm,
    dataShareTest,
    dataShareView
  },
  data(){
    return {
      depts: {},
      dialogTitle: '',
      dialogVisibleType: '',
      dialogVisible: false,
      tableLoading: false,
      currentId: null,
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        editBtn: false,
        addBtn: false,
        size: 'small',
        // viewBtn: true,
        // delBtn: false,
        // menuWidth: 350,
        dialogClickModal: false,
        menuWidth: 250,
        column: [
          {
            label: '名称',
            prop: 'name',
            span: 24
          },
          {
            label: '入参',
            prop: '_inputParams'
          },
          {
            label: '返回参数',
            prop: '_outputParams'
          },
          {
            label: '提供方',
            prop: 'supplyDepartment'
          },
          {
            label: '使用方',
            prop: 'useDepartment'
          },
          {
            label: '提供时间',
            prop: 'supplyTime'
          },
          {
            label: '调用次数',
            prop: 'callCount'
          },
          {
            label: '调用数据量(条)',
            prop: 'callRecords'
          }
        ]
      }
    }
  },
  methods: {
    deleteRow(row){
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        api.remove({
          ids:row['id']
        }).then(res => {
          this.onLoad();
        })
      })
    },
    addRow(){
      this.dialogVisible = true;
      this.dialogVisibleType = 'edit';
      this.dialogTitle = '新增';
      this.currentId = null;
      // this.$breadcrumb.add({
      //   name: '新增'
      // });
      // this.$router.push('/dataShare/create');
    },
    editRow(row){
      // this.$breadcrumb.add({
      //   name: '编辑'
      // });
      // this.$router.push('/dataShare/update/' + row.id);
      this.dialogVisible = true;
      this.dialogVisibleType = 'edit';
      this.dialogTitle = '编辑';
      this.currentId = row.id;
    },
    viewRow(row){
      // this.$breadcrumb.add({
      //   name: '查看'
      // });
      // this.$router.push('/dataShare/detail/' + row.id);
      this.dialogVisible = true;
      this.dialogVisibleType = 'view';
      this.dialogTitle = '查看';
      this.currentId = row.id;
    },
    testRow(row){
      // this.$breadcrumb.add({
      //   name: '测试'
      // });
      // this.$router.push('/dataShare/test/' + row.id);
      this.dialogVisible = true;
      this.dialogVisibleType = 'test';
      this.dialogTitle = '测试';
      this.currentId = row.id;
    },
    dialogCancel(data){
      if(data){
        this.dialogTitle = data.title;
        this.dialogVisibleType = data.type;
      }else{
        this.dialogTitle = '';
        this.dialogVisibleType = '';
        this.dialogVisible = false;
      }
    },
    onLoad(){
      this.tableLoading = true;
      this.tableData = [];
      api.page({
        current: this.page.currentPage,
        size: this.page.pageSize
      }).then(
        res => {
          this.tableLoading = false;
          if(res.data){
            let tableData = [];
            (res.data.data.records || []).forEach(
              item => {
                tableData.push({
                  ...item,
                  _inputParams: JSON.parse(item.inputParams).map(v => v.key).join(','),
                  _outputParams: JSON.parse(item.outputParams).map(v => v.key).join(',')
                })
              }
            )
            this.tableData = tableData;
            this.page.total = res.data.data.total;
          }else{

          }
        }
      )
    }
  },
  created(){
    api.getDeptList().then(
      res => {

        let handel = (data) => {
          data.forEach(item => {
            this.depts[item['id']] = item['deptName'];
            if(item['children'] && item['children'].length){
              handel(item['children'])
            }
          })
        }
        handel(res.data.data || []);
      }
    )
  },
  mounted(){

  }
}
</script>